<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>我的博客 - 倾城の陌</title>
    
    <!-- jQuery(Bootstrap的JavaScript插件需要引入jQuery，务必在bootstrap.min.js之前引入) -->
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" data-integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" data-crossorigin="anonymous">
	
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" data-integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" data-crossorigin="anonymous"></script>
	
	<link rel="stylesheet" type="text/css" href="../static/nav.css"/>
	<script charset="utf-8" src="../static/nav.js"></script>
	
	<script charset="utf-8" src="../kindeditor/kindeditor-all.js"></script>
	<script charset="utf-8" src="../kindeditor/lang/zh-CN.js"></script>
</head>

<body>
<!-- 导航栏 -->
<nav class="nav_load"></nav>

<div class="container-fluid">
	<div class="row">
		<div id="pack" class="col-xs-12 col-sm-8 col-sm-offset-2" style="height: 80vh; margin-top: 5vh;">
			<textarea id="editor" name="content"></textarea>
		</div>
		
		<div class="col-xs-12 col-sm-8 col-sm-offset-2" style="margin-top: 10px;">
			<p class="text-center">
				<button type="button" class="btn btn-primary" onclick="createHtml()">生成HTML</button>
			</p>
		</div>
	</div>
	
	<div id="download" style="display: none;">
		<div class="alert alert-success alert-dismissable" style = "width: 30vw;">
		    <button type="button" class="close" onclick="alertHide()">
		        &times;
		    </button>
			<p>成功！下载生成好的HTML文件。<p>
			<div id="download_url"></div>
		</div>
	</div>
	
	<div id="error" style="display: none; width: 30vw;">
		<div class="alert alert-danger alert-dismissable">
            <button type="button" class="close" onclick="alertHide()">
                &times;
            </button>错误！内容不能为空。
        </div>
	</div>
</div>

</body>

<style>
	#download {
		position: absolute;
		top: 30vh;
		left: 35vw;
	}
	
	#error {
		position: absolute;
		top: 30vh;
		left: 35vw;
	}
</style>

<script>
	var pack_w = 0;
	var pack_h = 0;
	var editor;
	
	$(function(){
		pack_w = document.getElementById('pack').clientWidth;
	    pack_h = document.getElementById('pack').clientHeight;
	    
	    KindEditor.ready(function(K) {
			editor = K.create('#editor', {
					width : '100%',  //编辑器的宽
					height : pack_h + 'px',  //编辑器的高
					fullscreenShortcut : true,
					resizeType: 0,
					afterBlur: function(){this.sync();}
				}
			);
		});
		
	});
	
	function alertHide() {
		$("#error").hide();
		$("#download").hide();
		$("#download a").remove();
	}
	
	function createHtml() {
		var value = $("#editor").val();
		
		if(value.length > 0) {
			$.get("https://szxck.gitee.io/blog-style-one/html/template", function(data){
				var content = insertStr(data, 2050, value);
				//console.log(content);
				var timestamp = new Date().getTime();
				var name = 'blog' + timestamp + '.html';
				exportBlog(name, content);
			});
			
			$("#download a").remove();
			$("#download").show();
		} else {
			$("#error").show();
			$("#error").fadeOut(4000);
		}
	}
	
	function insertStr(soure, start, newStr){   
		return soure.slice(0, start) + newStr + soure.slice(start);
	}
	
	function exportBlog(name, data) { 
		var blob = new Blob([data]);
		var a = document.createElement("a");
		a.href = window.URL.createObjectURL(blob);
		a.download = name;
		a.textContent = "Download：" + name;
		document.getElementById("download_url").appendChild(a);
	}
	
	function exportHtml(name, data) {
		var urlObject = window.URL || window.webkitURL || window;
		var export_blob = new Blob([data]);
		var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
		save_link.href = urlObject.createObjectURL(export_blob);
		save_link.download = name;
		
		var ev = document.createEvent("MouseEvents");
		ev.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
		save_link.dispatchEvent(ev);
	}
	
</script>
</html>